<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>HTML Table</title>
        <script src="../raxan/startup.js" type="text/javascript"></script>
        <script type="text/javascript">
            /**
             * HTMLTable with hover effect
             */

            Raxan.css('master');
            Raxan.css('default/theme');
            Raxan.include('jquery');

            // listen to html ready event
            Raxan.ready(function(){
                $('table tr').hover(function(){
                    if (!$(this).hasClass('tbl-header')) $(this).addClass('hover');
                },
                function(){
                    $(this).removeClass('hover');
                });
            });

        </script>
    </head>

    <body>

        <div class="container c30 tpm">
            <table class="rax-table c22 border mouse-cursor white " cellpadding="0" cellspacing="0">
                <thead>
                    <tr class="tbl-header">
                        <td>Name</td>
                        <td>Sku</td>
                        <td class="sort">Category</td>
                        <td>Qty</td>
                        <td>Color</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Milk</td>
                        <td>0001</td>
                        <td class="sort">Dairy</td>
                        <td>7</td>
                        <td>White</td>
                    </tr>
                    <tr class="even ">
                        <td>Bread</td>
                        <td>0012</td>
                        <td class="sort">Wheat</td>
                        <td>3</td>
                        <td>Brown</td>
                    </tr>
                    <tr>
                        <td>Butter</td>
                        <td>0054</td>
                        <td class="sort">Dairy</td>
                        <td>2</td>
                        <td>Yellow</td>
                    </tr>
                    <tr class="even">
                        <td>Cheese</td>
                        <td>0021</td>
                        <td class="sort">Dairy</td>
                        <td>6</td>
                        <td>White</td>
                    </tr>
                    <tr class="rax-selected-pal rax-metalic">
                        <td>Jam</td>
                        <td>0041</td>
                        <td>Other</td>
                        <td>4</td>
                        <td>Blue</td>
                    </tr>
                    <tr>
                        <td>Tea</td>
                        <td>0164</td>
                        <td class="sort">Other</td>
                        <td>2</td>
                        <td>Green</td>
                    </tr>
                </tbody>
            </table>
        </div>


    </body>

</html>
